<template>
	<view class="tabbar" :style="{'height':(barHeight) + 'px'}">
		<view class="tab_box" :style="{'padding-top': statusBarHeight + 'px','height': barHeight + 'px'}">
			<view class="tab">
				<!-- <view class="left">
					<view class="icon">
						<tui-icon name="notice" size='24' color="#111"></tui-icon>
						<tui-badge dot type="danger" :scaleRatio=".8" absolute top='-6rpx' right='-6rpx'></tui-badge>
					</view>
				</view> -->
				<!-- <view class="title">{{tabName}}</view> -->
				<view class="search">
					<view class="text" @click="goSearch()">
						<image :src="imgConfig + 'images/index/tab_search.png'" mode="widthFix" class="icon"></image>
						<text>请输入关键字</text>
						<view class="btn">搜索</view>
					</view>
				</view>
				<view class="right">
					<!-- <view class="icon" @click="goSearch()" style="margin-right: 16rpx;">
						<tui-icon name="search" size='24' color="#111"></tui-icon>
					</view>
					<view class="icon" @click="goCart()">
						<tui-icon name="cart" size='24' color="#111"></tui-icon>
						<tui-badge type="danger" :scaleRatio=".7" absolute top='-8rpx' right='-12rpx'>{{cartGoodsCount}}</tui-badge>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	const util = require("@/utils/util.js")
	export default {
		name: 'tabbar',
		components: {

		},
		props: {
			
		},
		data() {
			return {
				imgConfig: util.domainImg,
				statusBarHeight: '',
				barHeight: '',
				cartGoodsCount: '', // 购物车数量
				tabName: ''
			};
		},
		computed: {

		},
		watch: {
			
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			initInfo() {
				this.getStatusBarHeight();
				this.getGoodsInfo();
				this.tabName = app.globalData.tabName;
			},
			goSearch() {
				uni.navigateTo({
					url: `/pages/search/search`
				});
			},
			goCart() {
				uni.navigateTo({
					url: `/pages/cart/cart`
				});
			},
			getGoodsInfo: function() {
				let that = this;
				util.request('cart/goodsCount', {
					userId: uni.getStorageSync('userId') || ''
				}).then(function(resp) {
					if (resp.code === 0) {
						that.cartGoodsCount = resp.goodsCount;
					}
				});
			},
			getStatusBarHeight() {
				let that = this;
				wx.getSystemInfo({
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight
						that.barHeight = res.statusBarHeight + 44;
					},
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 100vw;
		background: transparent;
		.tab_box {
			width: 100vw;
			background: transparent;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1000;
			box-sizing: border-box;
			overflow: hidden;
			.tab {
				position: relative;
				.search {
					width: 100%;
					height: 44px;
					padding: 0 210rpx 0 30rpx;
					display: flex;
					align-items: center;
					.text {
						width: 100%;
						line-height: 60rpx;
						background: #FFFFFF;
						border-radius: 30rpx;
						padding: 0 100rpx 0 70rpx;
						font-size: 26rpx;
						color: #AAAAAA;
						position: relative;
						.icon {
							width: 30rpx;
							position: absolute;
							left: 28rpx;
							top: 15rpx;
						}
						.btn {
							width: 100rpx;
							height: 24rpx;
							line-height: 1;
							font-size: 24rpx;
							color: #666666;
							text-align: center;
							position: absolute;
							right: 0;
							top: 18rpx;
							border-left: 2rpx solid #AAAAAA;
						}
					}
					
				}
				.title {
					width: 100%;
					text-align: center;
					line-height: 44px;
					font-size: 36rpx;
				}
				.icon {
					position: relative;
				}
				.left {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 100%;
					position: absolute;
					left: 20rpx;
					top: 0;
				}
				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 100%;
					position: absolute;
					right: 20rpx;
					top: 0;
				}
			}
		}
	}
</style>
